React Suspense
これ読めばざっくりわかる。
ポイント
サスペンド状態がSuspenseの中心である。これをまずは覚えろ。 サスペンド状態というのは、「レンダリングがまだできないよ〜〜」て状態のこと。
なぜできないのか？理由はさまざまだけど、よくあるのはデータフェッチの途中であるとかかな。
まだサーバーからデータ取得できてないとか。
Promiseインスタンスがthrowされたら、サスペンド状態という。
「サスペンド状態」の際、それを処理するコンポーネント（= Suspense）が無いと、そのアプリ全体のレンダリングが機能しない。
全部真っ白になりますので注意。
Promiseを投げるコンポーネントの親にSuspenseがいたら、そのSuspenseが投げられたサスペンド状態に対応する。
Suspenseはサスペンド状態の間、フォールバックコンポーネントを表示する。
これは基本的に「ローディング」とかになりがちよな。
Suspenseは子コンポーネントの内、どれか1つでもサスペンド状態なら、フォールバックコンポーネントを表示する。
Suspenseは、Promiseの結果が返ってきたことを検知したら、再度子コンポーネントのレンダリングを促す。
再レンダリング後に、またサスペンド状態が上がってきたら、フォールバックコンポーネントを表示する。
再レンダリング後に、サスペンド状態が無ければ完了。
まあ、非同期でレンダリングに時差があり、ローディング画面が必要とかいうときは、throw new Promiseと、Suspenseを使うといいよ。
ただし、ちゃんと理解してないと多分、実装が複雑になる。
基本的にはサーバーAPI叩く時に使うんだろうから、そん時、TanStack Queryとかのライブラリの利用を検討すればよし。
参考